<template>
  <fieldset>
    <div id="app">
      <div class="add">
        编号:<input type="text" v-model='code'>
        品牌名称:<input type="text" v-model='productName'>
        <br/>
        产品图片地址:<input type="text" v-model='imgSrc'>
        价格:<input type="text" v-model='price'>&nbsp;
         <input type="button" value="添加" @click='add'>
      </div>
      <div>
        <table class="tb">
          <tr>
            <th>
              <input type="checkbox" @change='allCheckChang' v-model='allCheck'>
              全选
            </th>
            <th>产品图片</th>
            <th>编号</th>
            <th>品牌名称</th>
            <th>数量</th>
            <th>价格</th>
            <th>操作</th>
          </tr>
          <tr v-for="(item,index) in products" :key="item.id">
            <td>
              <input type="checkbox" v-model='checks' :value='item'>
              
            </td>
            <td>
              <img :src="item.imgSrc" alt="" width="50" />
            </td>
            <td>
              {{ item.code }}
            </td>
            <td>
              {{ item.productName }}
            </td>
            <td>
                <button @click='decrease(item)' :disabled='item.count===1'>-</button>
              {{ item.count }}
              <button @click='increase(item)'>+</button>
            </td>
            <td>
              {{ item.price }}
            </td>
            <td>
              <button @click='del(index)'>删除</button>
            </td>
          </tr>
          <!-- 动态生成内容tr -->
        </table>
        <div class="adp">没有更多数据了</div>
        <h1 class="add" style="text-align:right">总价:{{total}}</h1>
      </div>
      <!-- <h1>{{checks}}</h1> -->
    </div>
  </fieldset>
</template>

<script>
export default {
  data() {
    return {
        allCheck:false,
        checks:[],
        code:'',
        productName:'',
        imgSrc:'',
        price:'',
      products: [
        {
          id: 1,
          imgSrc:
            "https://pic3.zhimg.com/v2-2fe73dbbe85ecaa3fc2b44fb09f4c5ec_720w.jpg?source=172ae18b",
          code: "1122",
          productName: "钢铁侠",
          count: 1,
          price: 100,
        },
        {
          id: 2,
          imgSrc:
            "https://ts1.cn.mm.bing.net/th/id/R-C.3c928d33cde573dc92a86f0a56c1c496?rik=ZXcJqNMboDBl3A&riu=http%3a%2f%2fpic1a.nipic.com%2f2008-09-08%2f200898125412920_2.jpg&ehk=1AKisi06QwSsElP%2f7Yt2y2FvS2WPXEX8yBFf%2bq6WgmM%3d&risl=&pid=ImgRaw&r=0",
          code: "1123",
          productName: "绿巨人",
          count: 1,
          price: 80,
        },
        {
          id: 3,
          imgSrc:
            "https://pic4.zhimg.com/v2-67d7516d9081145b69b36301ea3baff3_r.jpg",
          code: "1124",
          productName: "绯红女巫",
          count: 1,
          price: 120,
        },
      ],
    }
    
  },
  computed:{
      total(){
          let res = this.checks.reduce((total,item) => {
              return total +=item.price*item.count
          },0)
          return res.toFixed(2)
      }
  },
  watch:{
      checks(newChecks){
          if(newChecks.length===this.products.length){
              this.allCheck = true
          }else{
              this.allCheck = false
          }
      }
  },
  
  methods:{
      increase(current){
          current.count++
      },
      decrease(current){
            current.count--
      },
      del(index){
        console.log(index)
        let target = this.products.splice(index,1)
            //过滤
        this.checks = this.checks.filter(item => item.id !== target[0].id)
      },
      add(){
          //非空校验
            if(!this.code || !this.imgSrc ||!this.productName || !this.price){
                return
            }
          let obj = {
              id:Math.random().toString(32).substring(2),
              imgSrc:this.imgSrc,
              code:this.code,
              productName:this.productName,
              count:1,
              price:this.price
          }
          this.products.push(obj)
      },
      allCheckChang(){
          console.log('allCheck')
          if(this.allCheck){
              this.checks = this.products
          }else{
              this.checks = []
          }
      }
  },
  
};
</script>
<style>
#app {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.adp {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
  text-align: center;
}
.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>